<template>
	<view class="reserve">
		<!-- 店铺名称 -->
		<view class="shop-name">
			<image :src="productMap.shop.logo" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"></image>
			{{productMap.brandName}}
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 项目卡片名称 -->
		<view class="card-project-box">
			<!-- 顶部项目图片与介绍 -->
			<view class="title-project-body-title">
				<image :src="productMap.skuDefaultImg" mode="scaleToFill"
					style="width: 120rpx; height: 120rpx; border-radius: 10rpx;"></image>
				<view class="order-info-text" style="margin-left: 20rpx; margin-right: 50rpx;">
					<view style="font-size: 28rpx; font-weight: 500;">
						{{productMap.skuName}}
					</view>
					<view style="font-size: 24rpx; margin-top: 10rpx; color: gray;">
						{{productMap.skuDesc == null?'无介绍描述':productMap.skuDesc}}
					</view>
				</view>
				<!-- <view class="card-money-box">
					<view v-if="productMap.linePrice != productMap.price"
						style="font-size: 24rpx; font-weight: bold; text-decoration: line-through; color: gray;">
						￥{{productMap.linePrice}}
					</view>
					<view style="font-size: 32rpx; font-weight: bold; color: red;">
						￥{{productMap.price}}
					</view>
					<view style="font-size: 24rpx; margin-top: 10rpx;">
						x 1
					</view>
				</view> -->
			</view>
			<!-- 商品总价 -->
			<view class="shop-total-money">
				<view style="display: flex; justify-content: space-between;" v-if="productMap.linePrice != productMap.price">
					<view class="">
						原价
					</view>
					<view 
						style="font-size: 24rpx; font-weight: bold; text-decoration: line-through; color: gray;">
						￥{{productMap.linePrice}}
					</view>
				</view>
				<view style="display: flex; justify-content: space-between;">
					<view class="">
						售价：
					</view>
					<view style="font-size: 28rpx; font-weight: bold; color: red;">
						￥{{productMap.price}}
					</view>
				</view>
				<!-- 
				<view @click="showMedol = true" style="display: flex; justify-content: space-between;" v-if="productMap.spuInfo.isUseIntegral == '1'">
					<view class="">
						积分抵扣：
					</view>
					<view style="font-size: 28rpx; font-weight: bold; color: red; text-decoration:line-through">
						￥{{(integral / 1000).toFixed(2)}}
					</view>
				</view> 
				<view v-if="productMap.spuInfo.isActivityStatus == '0'" style="display: flex; justify-content: space-between;">
					<view class="">
						优惠券：
					</view>
					<view v-if="showHistory" style="font-size: 28rpx; font-weight: bold; color: red;" @click="selectCoupon">
						{{couponName == null?'可用：' + historyList.length:'已选：' + couponName.couponName}}
					</view>
					<view v-else style="font-size: 28rpx; font-weight: bold; color: red;">
						无可用优惠券
					</view>
				</view>
				-->
				<view v-if="couponName != null && productMap.spuInfo.isActivityStatus == '0'" style="display: flex; justify-content: space-between;">
					<view class="">
						抵扣：
					</view>
					<view v-if="couponName.reduceType == '1'" style="font-size: 28rpx; font-weight: bold; text-decoration: line-through; color: red;">
						￥{{couponName.amount}}
					</view>
					<view v-if="couponName.reduceType == '2'" style="font-size: 28rpx; font-weight: bold; text-decoration: line-through; color: red;">
						{{couponName.discount * 100}} 折
					</view>
				</view>
				<!-- <view style="display: flex; justify-content: space-between;">
					<view class="">
						返利：
					</view>
					<view style="font-size: 28rpx; color: orangered;">
						¥{{productMap.skuRebate == null || productMap.skuRebate == ''?'0.00':productMap.skuRebate}}
					</view>
				</view>
				<view style="display: flex; justify-content: space-between;">
					<view class="">
						合计：
					</view>
					<view v-if="couponName == null" style="font-size: 32rpx; font-weight: bold; color: red;">
						￥{{productMap.price - (integral / 1000).toFixed(2)}}
					</view>
					<view v-if="couponName != null" style="font-size: 32rpx; font-weight: bold; color: red;">
						￥{{(couponName.reduceType == '1'?(productMap.price - couponName.amount).toFixed(2) -(integral / 1000).toFixed(2) : (productMap.price * couponName.discount).toFixed(2) - (integral / 1000).toFixed(2) )}}
					</view>
				</view>
				 -->
				<view style="display: flex; justify-content: space-between;">
					<view class="">
						{{productMap.skuTitle}}
					</view>
					<view style="color: gray;">
						剩1/共1次
					</view>
				</view>
			</view>
			<!-- 中部选择到店服务还是上门服务 -->
			<view style="display: flex; flex-direction: column;">
				<!-- 单选按钮 -->
				<view v-if="productMap.skuServiceType == 3" class="radio-box-row" style="font-weight: 500;">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" shape="circle" v-for="(item, index) in radiolist1"
							:key="index" :label="item.name" :name="item.value">{{item.name}}</u-radio>
					</u-radio-group>
				</view>

				<view class="store-address-box"
					v-if="productMap.skuServiceType == 1 || productMap.skuServiceType == 3 && radiovalue1 == '1'">
					<view style="font-size: 28rpx; font-weight: 500;">
						到店地址：
					</view>
					<view style="color: gray; font-size: 24rpx; margin-top: 10rpx;">
						{{productMap.shop.address}}
					</view>
				</view>
				<!-- 上门服务选择地址 -->
				<view class="store-address-box"
					v-if="productMap.skuServiceType == 2 && productMap.skuServiceType == 3 || radiovalue1 == '2'">
					<!--  -->
					<view style="font-size: 28rpx; margin-bottom: 20rpx; font-weight: 500; display: flex; justify-content: space-between;">
						<view class="">
							上门地址：
						</view>
						<view v-if="userAddress.detailAddress != null" class="">
							{{userAddress.detailAddress}}
						</view>
						<view v-else class="">
							<u-button type="primary" size="mini" @click="authLocation">绑定地址</u-button>
						</view>
					</view>
					<view
						style="display: flex; flex-direction: row; padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500;">
						<view style="white-space: nowrap;">详细地址：</view>
						<input class="uni-input" style="width: 100%;"  @input="addressInfoFnc" v-model="addressInfo"
							border="none" placeholder="街道、门牌号等"></input>
					</view>
					
					<!-- <view style="font-size: 28rpx; font-weight: 500;">
						上门地址： 
						{{userAddress.province == null?'':userAddress.province}}
						{{userAddress.city == null?'':userAddress.city}}
						{{userAddress.region == null?'':userAddress.region}}
					</view>
					<view style="color: gray; font-size: 24rpx; margin-top: 10rpx">
						{{userAddress.detailAddress == null?'':userAddress.detailAddress}}
					</view> -->
				</view>
				<view
					style="display: flex; flex-direction: row; padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx;">
					<view>预约人：</view>
					<input class="uni-input"  @input="changeName" v-model="userAddress.name"
						border="none" placeholder="请输入预约人"></input>
				</view>
				<view
					style="display: flex; flex-direction: row; padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx;">
					<view>手机号：</view>
					<input class="uni-input" type="number" @input="changePhone" maxlength="11" v-model="userPhone"
						border="none" placeholder="请输入手机号"></input>
				</view>
				<!-- 上门 -->
				<view v-if="radiovalue1 == 2" style="padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx; display: flex; flex-direction: row;">
					上门时间：{{predictTime}}
				</view>
				<!-- 到店 -->
				<view v-if="radiovalue1 == 1" @click="openDatetimePicker"
					style="padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx; display: flex; flex-direction: row;">
					{{radiovalue1 == '1'?'预约时间':'上门时间'}}：
					<view class="uni-list-cell-db" style="color: gray;">
						{{birthday == ""?'请选择预约时间':birthday}}
					</view>
					<view style="margin-left: auto; margin-right: 30rpx;">
						>
					</view>
				</view>
				<view
					style="display: flex; flex-direction: row; padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx;">
					服务手艺人：
					<view style="display: flex; flex-grow: 1;">
						<picker style="width: 100%;" mode="selector" :range="craftsman" range-key="craftsmanName"
							@change="schoolChange">
							{{username?username:'店铺推荐'}}
						</picker>
					</view>
					<view style="margin-left: auto; margin-right: 30rpx;">
						>
					</view>
				</view>
				<view
					style="display: flex; flex-direction: row; padding: 20rpx 0;border-top: 1rpx solid #F3F3F3; font-size: 28rpx; font-weight: 500; margin-left: 30rpx;">
					<view style="width: 120rpx;">备注：</view>
					<textarea v-model="note" placeholder-style="font-weight: 100;" placeholder="给商家留言,不超过100字" />
				</view>
			</view>
		</view>
		
		<xp-picker ref="myPicker" :value="birthday"  @input="handleSubmit" mode="ymdhi" :yearRange="[2022,2030]"/>
		
		<!-- 悬浮支付窗 -->
		<view class="action-section" >
			<view class="total-box">
				<!-- <text class="coupon" v-if="showHistory">
					已优惠
					<text v-if="couponName.reduceType == '1'">{{couponName.amount}} 元</text>
					<text v-if="couponName.reduceType == '2'">{{couponName.discount}} 折</text>
				</text> -->
				<text v-if="couponName == null" class="price">总价格：¥{{productMap.price - (integral / 1000).toFixed(2)}}</text>
				<text  v-if="couponName != null" class="price">总价格：¥{{(couponName.reduceType == '1'?(productMap.price - couponName.amount).toFixed(2) -(integral / 1000).toFixed(2) : (productMap.price * couponName.discount).toFixed(2) -(integral / 1000).toFixed(2))}}</text>
			</view>
			<button type="primary" :disabled="selectedCartIds" style="background-color:#7EAFA5"
				class="no-border confirm-btn" @click="createOrder">立 即 预 约</button>
		</view>
		
		<!-- 积分抵扣弹窗 -->
		<view class="showPopup" v-if="showMedol">
			<view class="centent-white-box">
				<view class="title-text">
					积分抵扣
				</view>
				<view style="color: red; text-align: center;">
					当前账户积分：{{userintegral}}
				</view>
				<view style="font-size: 28rpx; color: gainsboro; text-align: center;">
					(0.01 = 10积分)
				</view>
				<view class="ticket-box" style="margin: 0 auto;">
					<u-number-box v-model="integral" :min="0" :max="userintegral"></u-number-box>
				</view>
				<view class="bottom-list-box" @click="showMedol = false">
					<view class="">
						确 认 抵 扣
					</view>
				</view>
			</view>
		</view>
		
		<!-- 选择优惠券弹出层 -->
		<view class="showPopup" v-if="clickShowHistory">
			<view class="centent-white-box">
				<view class="title-text">
					选择优惠券
				</view>
				<view class="ticket-box">
					<u-checkbox-group :max="1" iconPlacement="left" placement="column">
						<u-checkbox
							@change="checkboxChange($event, item, index)"
							icon-size="36"
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in historyList"
							:key="index"
							:name="item.historyId"
							v-model="item.checked"
							shape="circle"
							active-color="success"
						>
						{{item.couponName}} <span style="margin-left: 70rpx; color:  red;">- {{item.reduceType == '1'?(item.amount+'元'):((item.discount * 100)+'折')}}</span> 
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="bottom-list-box" @click="clickShowHistory = false">
					<view class="">
						确 认 选 择
					</view>
				</view>
			</view>
		</view>


	</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['applicationConfig', 'session_key', 'openid', 'token'])
		},
		data() {
			return {
				// 当前账户可用积分
				userintegral: 0,
				// 显示抵扣积分弹窗
				showMedol: false,
				// 使用的积分
				integral: 0,
				// 选择的优惠券
				couponName: null,
				// 可使用优惠券列表
				historyList: [],
				// 是否显示可选择优惠券
				showHistory: false,
				// 显示优惠券列表弹窗
				clickShowHistory: false,
				// 选择的优惠券列表
				checkboxValue1: [],
				// 需要存到数据库的公里数,
				distance: '',
				// 需要存到数据库的分钟数
				aboutTime: '',
				// 预约上门时间
				predictTime: '',
				// 详细地址
				addressInfo: '',
				// 商品id
				productId: null,
				// 商品详情信息
				productMap: {},
				// 用户上门服务地址
				userAddress: {
					name: null,
					phoneNumber: null,
					province: null,
					city: null,
					region: null,
					detailAddress: null
				},
				// 用户注册信息
				userInfo: {},
				userPhone: "",
				userName: "",
				// 备注
				note: '',
				show: false,
				birthday: "",
				form: {

				},
				radiolist1: [{
						name: '到店服务',
						value: '1'
					},
					{
						name: '上门服务',
						value: '2'
					}
				],
				craftsman: [],
				index: '0',
				username: '店铺推荐',
				radiovalue1: '1'
			}
		},
		// watch: {
		// 	refresh: function(){
		// 		this.getUserSite();
		// 	}
		// },
		onShow() {
			// this.getUserSite();
			this.getUserInfo()
			this.userintegral = uni.getStorageSync('userInfo').integration
		},
		onLoad(e) {
			// 商品id
			this.productId = e.id
			// 获取商品信息
			this.getProductInfo(e.id)
			
		},
		methods: {
			// 授权绑定店铺位置
			authLocation(){
				const that = this
				// 获取用户授权情况
				uni.getSetting({
					success: resp => {
						console.log(resp.authSetting['scope.userLocation']);
						if(!resp.authSetting['scope.userLocation']){
							// 授权定位
							uni.getLocation({
								type: 'wgs84',
								success: function(respp) {
									console.log("当前位置的经度：" + respp.longitude);
									console.log("当前位置的纬度：" + respp.latitude);
									uni.setStorageSync('location', respp.latitude + "," + respp.longitude)
								},fail(err) {
									uni.showModal({
										title: '',
										content: '请在系统设置中打开定位服务,开启后需要授权才能使用地图功能',
										confirmText: '确定',
										success: function (res) {
											uni.openSetting({
												success(auth) {
													 if (auth.authSetting['scope.userLocation']) {
													      // 授权成功，重新定位
													      uni.getLocation({
													        success: location => {
																uni.setStorageSync('location', location.latitude + "," + location.longitude)
															}
													      });
													    } else {
													      // 没有允许定位权限
													      uni.showToast({
													        title: '您拒绝了定位权限，将无法使用地图功能',
													        icon: 'none'
													      });
													    }
												}
											})
										}
									})
								}
							})
						}else {
							// 选择位置
							uni.chooseLocation({
								success: function (res) {
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
									let lat2 = that.productMap.shop.location.split(",")[0]
									let lan2 = that.productMap.shop.location.split(",")[1]
									lat2 = Number(lat2).toFixed(6)
									lan2 = Number(lan2).toFixed(6)
									let orTime =  that.getDistance(res.latitude,res.longitude,lat2,lan2)
									that.predictTime = that.getDuration(orTime)
									that.userAddress.detailAddress = res.address
								}
							});
						}
					}
				})
			},
			// 点击选择优惠券
			selectCoupon(){
				console.log("显示弹窗");
				this.clickShowHistory = true
			},
			// 选择优惠券
			checkboxChange(e, item, index) {
				console.log(e);
				if(e.value == true){
					this.couponName = item
				}else{
					this.couponName = null
				}
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.request.userInfo({}, res => {
					if (res.code == 200) {
						console.log(res);
						uni.setStorageSync('userInfo',res.data)
						this.userInfo = res.data
						// this.userPhone = res.data.phone
						this.userName = res.data.nickname || res.data.username
					}
				})
			},
			//详细地址输入
			addressInfoFnc(e){
				this.addressInfo =  e.target.value
			},
			// 获取用户输入手机号
			changePhone(e) {
				this.userPhone = e.target.value
			},
			changeName(e) {
				this.userName = e.target.value
			},
			// 获取用户收货地址
			getUserSite() {
				this.$api.request.getMemberReceiveAddrList(res => {
					if (res.code == 200) {
						if (this.radiovalue1 != '1' && res.data.length == 0) {
							uni.showModal({
								title: "温馨提示",
								content: '请绑定您的上门服务地址',
								// showCancel: false,
								success(res) {
									if (res.confirm) {
										// uni.navigateTo({
										// 	url: '../../../pages/sys/shopCart/addressManage?id='
										// })
									}
								}
							})
						}else{
							if(res.data.length > 0){
								this.userAddress = res.data[0]
								this.userPhone = res.data[0].phoneNumber
							}
						}
					} else if (res.code == 201) {
						this.isShowModel = true
					}
				})
			},
			// 用户授权
			userAuthConfirm() {
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success: (res) => {
						console.log(res);
						this.$api.request.userLoginOrAdd({
							encryptedData: res.encryptedData,
							iv: res.iv,
							sessionKey: this.session_key,
							wechatId: uni.getStorageSync('openId'),
							sourceType: "APP",
							nickName: res.userInfo.nickName,
							avatarUrl: res.userInfo.avatarUrl
						}, resp => {
							console.log(resp);
							if (resp.code == 200) {
								this.$store.commit("setToken", resp.data.tokenValue)
								this.$store.commit("login", resp.data);
								uni.setStorageSync('authStatus', true)
								this.isShowModel = false
							}
						})
					}
				})
			},
			// 获取可用优惠券列表
			getHistoryList(spuId){
				const that = this
				this.$api.request.getHistoryByUserSpuId({
					memberId: uni.getStorageSync('userInfo').id,
					spuId: spuId
				}, res => {
					if(res.code == 200){
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].checked = false
						}
						that.historyList = res.data
						that.showHistory = res.data.length > 0?true:false
					}
				})
			},
			// 获取订单详情
			getProductInfo(n) {
				this.$api.request.skuDetail({
					id: n
				}, res => {
					if (res.code == 200) {
						this.getHistoryList(res.data.spuId)
						this.productMap = res.data
						// 获取用户收货地址
						// this.getUserSite()
						// 获取技师数据
						this.getCraftsmanDataAll(res.data.shop.id)

						// 判断服务类型  1：到店服务  2：上门服务  3：两者都有
						if (res.data.skuServiceType == 1) {
							this.radiovalue1 = 1
						} else if (res.data.skuServiceType == 2) {
							this.radiovalue1 = 2
							// this.getUserSite()							


						} else {
							this.radiovalue1 = 1
						}

					}
					console.log(res);
				})
			},
			// 获取技师数据
			getCraftsmanDataAll(storeId) {
				this.$api.request.getCraftsmanDataAll({
					storeId: storeId
				}, res => {
					console.log(res);
					if (res.code == 200) {
						res.data.unshift({
							craftsmanName: "店铺推荐",
							id: "0",
							phone: "",
							storeId: "1496671794119516161",
							wxid: ""
						})
						this.craftsman = res.data
					}
				})
			},
			//点击服务切换
			groupChange(n) {
				const that = this
				console.log('groupChange', n);
				this.radiovalue1 = n
				// 如果用户没有上门地址，则提示用户注册上门地址
				if (n != '1' && this.userAddress.detailAddress == null) {
					uni.showModal({
						title: "温馨提示",
						content: '请绑定您的上门服务地址',
						success(res) {
							if (res.confirm) {
								// uni.navigateTo({
								// 	url: '../../../pages/sys/shopCart/addressManage?id='
								// })
							} else if (res.cancel) {
								console.log('用户点击取消');
								that.radiovalue1 = '1'
							}

						}
					})
				}
			},
			schoolChange: function(e) {
				const index = e.target.value
				this.username = this.craftsman[index].craftsmanName
				this.index = this.craftsman[index].id

			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				this.birthday = e;
			},

			// 立即预约
			createOrder() {
				// 判断数据是否已经填充完毕
				if (this.radiovalue1 != '1' && this.userAddress.detailAddress == null) {
					// uni.showToast({
					// 	title: "请前往添加上门地址",
					// 	icon: "none"
					// })
					uni.showModal({
						title: "温馨提示",
						content: '请绑定您的上门服务地址',
						success(res) {
							if (res.confirm) {
								// uni.navigateTo({
								// 	url: '../../../pages/sys/shopCart/addressManage?id='
								// })
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})
				} else if (this.userPhone == null || this.userPhone.length != 11) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					})
				}else if(this.userName == null || this.userName == ""){
					uni.showToast({
						title: "请输入预约人",
						icon: "none"
					})
				}else if (this.birthday == "" && this.radiovalue1 == '1') {
					uni.showToast({
						title: "请选择预约时间",
						icon: "none"
					})
				} else {
					// 预约到店店铺地址
					let store = this.productMap['shop'].receiveLocation + this.productMap['shop'].receiveAddress
					// 预约上门用户地点
					let visit = ""
					if(this.userAddress != null){
						visit = this.userAddress.detailAddress + this.addressInfo
					}

					// 准备上传的参数
					const data = {
						memberId: uni.getStorageSync('userInfo').id, // 用户编号
						wxid: this.userInfo.wechatId, // 微信id
						wxname: this.userInfo.nickname, // 微信昵称
						userName: this.userName, // 地址姓名||微信昵称
						userPhone: this.userPhone, // 预约人手机号
						storeAddress: this.radiovalue1 == '1' ? store : visit, // 预约店铺地址
						serviceUserId: this.index, // 手艺人编号
						subscribeTime: this.birthday, // 预约服务时间
						remark: this.note, // 备注
						subscribeType: this.radiovalue1, // 预约类型 1：到店服务，2：上门服务

						projectId: this.productMap.skuId, // 商品编号
						projectName: this.productMap.skuName, // 商品名称
						projectInfo: this.productMap.skuDesc, // 商品说明
						storeName: this.productMap.brandName, // 店铺名称
						projectMoney: this.couponName == null?this.productMap.price - (this.integral / 1000).toFixed(2):(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(2) - (this.integral / 1000).toFixed(2):(this.productMap.price*this.couponName.discount).toFixed(2) - (this.integral / 1000).toFixed(2)), // 项目价格
						amount: 1, // 购买数量


						// 订单实体
						yytOmsOrder: {
							totalAmount: this.productMap.price,
							payAmount: this.couponName == null?this.productMap.price - (this.integral / 1000).toFixed(2):(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(2) - (this.integral / 1000).toFixed(2):(this.productMap.price*this.couponName.discount).toFixed(2) -(this.integral / 1000).toFixed(2)),
							integration: this.couponName == null?this.productMap.price:(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(0):(this.productMap.price*this.couponName.discount).toFixed(0)),
							growth: this.couponName == null?this.productMap.price:(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(0):(this.productMap.price*this.couponName.discount).toFixed(0)),
							shopId: this.productMap.shop.id,
							receiverName: this.userAddress.name || this.userInfo.nickname,
							receiverPhone: this.userPhone,
							note: this.note,
							sourceType: 1,
							billType: 0,
							useIntegration: this.integral,
							integrationAmount: (this.integral / 1000).toFixed(2),
							couponId: this.couponName == null?null:this.couponName.historyId,
							couponAmount: this.productMap.price - (this.couponName == null?this.productMap.price:(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(2):(this.productMap.price*this.couponName.discount).toFixed(2))),
							itemList: [{
								spuId: this.productMap.spuId,
								spuName: this.productMap.spuName,
								spuPic: this.productMap.spuImages.length > 0 ? this.productMap.spuImages[0] :'',
								spuBrand: this.productMap.brandName,
								categoryId: this.productMap.catalogId,
								skuId: this.productMap.skuId,
								skuRebate: this.productMap.skuRebate,
								skuName: this.productMap.skuName,
								skuPic: this.productMap.skuImages[0].imgUrl,
								skuPrice: this.productMap.price,
								skuQuantity: 1,
								shopId: this.productMap.shop.id,
								actId: this.productMap.spuInfo.actId,
								promotionAmount: this.productMap.price,
								integrationAmount: (this.integral / 1000).toFixed(2),
								realAmount: this.couponName == null?this.productMap.price - (this.integral / 1000).toFixed(2):(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(2) - (this.integral / 1000).toFixed(2):(this.productMap.price*this.couponName.discount).toFixed(2) - (this.integral / 1000).toFixed(2)),
								couponAmount: (this.productMap.price) - (this.couponName == null?this.productMap.price:(this.couponName.reduceType == '1'?(this.productMap.price - this.couponName.amount).toFixed(2):(this.productMap.price*this.couponName.discount).toFixed(2)))
							}]
						}
					}
					console.log(data);
					// 如果是上门服务
					if(this.radiovalue1 == '2'){
						data.distance = this.distance
						data.aboutTime = this.aboutTime
					}
					this.$api.request.addSubscribe(data, res => {
						console.log(res);
						if (res.code == 200) {
							uni.removeStorageSync("placeOrder");
							res.data.user.number = 1
							this.toPay(res);
						}
					})
					
					
				}
			},
			toPay(data) {
				let res = JSON.parse(data.data.jsonStr)
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: (res) => {
						console.log("成功", res);
						this.$api.request.payNotify(data.data.user, res => {
							console.log("通知", res);
							uni.redirectTo({
								url: "/pagesA/sys/user/order?type=2"
							})
						})

					},
					fail: (err) => {
						console.log(err);
						this.$api.request.addOrderMessageQueue({orderId: data.data.user.id}, res => {
							console.log(res);
							if(res.code == 200){
								uni.navigateTo({
									url: '/pagesA/sys/user/order?type=0'
								});
							}
						})
					}
				})
			},
			
			/**
			 * 计算预计时长
			 */
			getDuration(number){
				// 如果在 1 公里以外
				if(number > 1){
					this.distance = Number(number).toFixed(2)
					this.aboutTime = Number(number).toFixed() * 10 + 10
					return Number(number).toFixed(2) + '公里，大约' + (Number(number).toFixed() * 10 + 10) + '分钟'
				}else{
					this.distance = Number(number).toFixed(2)
					this.aboutTime = Number(number).toFixed() * 10 + 10
					return Number(number).toFixed(2) + '公里，大约10分钟'
				}
			},
		   
		   
			/**根据经纬度计算距离
			 * @param {Object} lat1
			 * @param {Object} lng1
			 * @param {Object} lat2
			 * @param {Object} lng2
			 */
			getDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI/180.0;
				var radLat2 = lat2 * Math.PI/180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI/180.0) - (lng2 * Math.PI/180.0)
				var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
				s = s*6378.137;
				s = Math.round(s*10000)/10000;
				
				var distance = s;
				var distance_str = "";
				
				if(parseInt(distance) >=1){
					distance_str = distance.toFixed(1) + "km";
				}else{
					distance_str = distance * 1000 + "m"
				}
				console.log("距离是：" + s);
				console.log("距离是：" + distance_str);
				return s;
			}
		}
	}
</script>

<style lang='scss'>
	.shop-name {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.card-project-box {
		width: auto;
		margin: 20rpx 30rpx;
		border: 1rpx solid #F6F6F6;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .1)
	}

	.order-info-text {
		width: calc(100vw - 375rpx);
		display: flex;
		flex-direction: column;
	}

	.card-money-box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.shop-total-money {
		width: auto;
		/* height: 60rpx; */
		font-size: 22rpx;
		padding: 0 30rpx;
		margin-top: 20rpx;
		/* border-radius: 10rpx; */
		line-height: 60rpx;
		background: #F5F5F5;
	}

	.title-project-body-title {
		display: flex;
		flex-direction: row;
		margin: 20rpx 20rpx;
	}

	.radio-box-row {
		margin-left: 30rpx;
		margin-top: 60rpx;
	}

	.store-address-box {
		margin: 30rpx 30rpx;
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100upx;
		/* #endif */
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 630upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;


		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			/* background: $font-color-disabled; */
			background-color: #7EAFA5;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;

			.price {
				font-size: $font-lg;
				color: #7EAFA5;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: #7EAFA5
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px 7EAFA5
		}

		.disabled {
			background-color: #7EAFA5;
			box-shadow: none
		}
	}
	
	.showPopup{
		width: 100vw;
		height: 100vh;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.6);
		z-index: 999 !important;
		
		.centent-white-box {
			width: 80vw !important; 
			height: 600rpx !important; 
			background: #FFFFFF; 
			border-radius: 20rpx; 
			display: flex; 
			flex-direction: column; 
			position: relative;
			
			.title-text {
				text-align: center;
				margin-top: 20rpx;
				font-size: 34rpx;
				font-weight: 500;
			}
			
			.ticket-box {
				width: auto;
				height: 400rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				overflow-y: scroll;
			}
			
			.bottom-list-box {
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: absolute;
				color: #FFFFFF;
				bottom: 0;
				border-top: 1rpx solid rgba(0, 0, 0, .1);
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background: #2979ff;
			}
		}
		
	}
		
</style>
